<template>
	<view class="container">
		<u-sticky bgColor="#fff" :customNavHeight="0">
			<u-tabs lineColor="#f56c6c" :list="list1" :current="current" @change="changeTab"></u-tabs>
		</u-sticky>
		
		<view v-if="current===0">
			 <u-empty  mode="list" v-if="myHotelList.length===0" icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			 
			 
			<view v-if="myHotelList.length>0">
				<uni-list :border="false">
					<uni-list-item  v-for="(item, index) in myHotelList" :key="item.id" :title="item.name" clickable
						:note="item.cityName" :rightText="item.createTime">
						
						<template v-slot:body>
							<text class="slot-box slot-text"  @tap.stop="handleToRoom(item.hotelId)">{{item.name}}<text class="slot-box slot-text2">{{item.cityName}}</text></text>
							
						</template>						
						
						<template v-slot:footer>
							<view class="chat-custom-right">
								<text class="chat-custom-text">{{item.createTime}}</text>
								<!-- 需要使用 uni-icons 请自行引入 -->
								<uni-icons type="trash-filled" color="red" size="18" @tap="onDelete(item)"></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>

			<!-- 加载更多 -->
			<uni-load-more v-if="myHotelList.length > 0" :status="loadStatus" :content-text="{
						contentdown: '上拉加载更多',
					  }" @tap="loadmore" />
		</view>		  
		
		
		<view v-if="current===1">
			 
			<view style="padding: 20rpx;">
				<u-cell-group>
						<u-cell title="集团"  :value="searchParams.hotelGroup!='' ? columns[0].filter((par) =>par.value==searchParams.hotelGroup)[0].label : '请选择'" @click="showHotelGroup"></u-cell>
						<u-cell title="城市"  :value="searchParams.cityName || '请选择'" @click="cityNameInputDialogToggle"></u-cell>
						<u-cell title="酒店名称"  :value="searchParams.keyword || '请选择'" @click="hotelNameInputDialogToggle"></u-cell>
				</u-cell-group>
				<u-picker :show="show" :columns="columns" keyName="label"  @cancel="hideHotelGroup" @close="hideHotelGroup" @confirm="confirmHotelGroup" closeOnClickOverlay></u-picker>
				<!-- 城市输入框 -->
				<view>
					<uni-popup ref="cityNameInputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="输入城市名称" value=""
							placeholder="请输入城市名称" @confirm="cityNameDialogInputConfirm"></uni-popup-dialog>
					</uni-popup>
				</view>
				<!-- 酒店名称输入框 -->
				<view>
					<uni-popup ref="hotelNameInputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="输入酒店名称" value=""
							placeholder="请输入酒店全称" @confirm="hotelNameDialogInputConfirm"></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view style="padding: 20rpx;">
				<button @click="handleSearch" class="login-btn cu-btn block bg-red lg round">搜索</button>
			</view>
			<u-toast ref="uToast" ></u-toast>
			<u-empty  mode="list" v-if="searchHotelList.length===0" icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			
			<view v-if="searchHotelList.length>0">
					<uni-list :border="false">
						<uni-list-item v-for="(item, index) in searchHotelList" :key="item.id" :title="item.name"
							:note="item.cityName" :rightText="item.createTime">
							<template v-slot:footer>
								<view class="chat-custom-right">
									<!-- 需要使用 uni-icons 请自行引入 -->
									<uni-icons type="plusempty" color="red" size="18" @tap="addHotel(item)"></uni-icons>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>		
		</view>		  
	</view>
</template>

<script>
	import {
		getMyHotelManageList,
		deleteMyHotel,
		getSearchHotelList,
		addHotel
	} from "@/api/system/hotel"

	export default {
		data() {
			return {
				list1: [{
					name: '我的关注',
				}, {
					name: '新增酒店',
				}],
				current: 0,
				loadStatus: '',
				myHotelList: [],
				searchHotelList: [],
				params: {
					pageNum: 1,
					pageSize: 15
				},
				searchParams:{
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					hotelGroup: '',
					cityName: '',
				},
				columns: [
					[{
						label: '锦江',
						// 其他属性值
						value: 'jj'
						// ...
					}, {
						label: '华住',
						value: 'hz'
					}, {
						label: '亚朵',
						value: 'yd'
					}]
				],
				show:false,
			}
		},
		methods: {
			getMyHotelManageList(pageNum = 1, pageSize = 15) {
				this.loadStatus = 'loading';
				getMyHotelManageList({
					pageNum,
					pageSize
				}).then(response => {
					let hotelList = response.rows;

					for (let i = 0; i < response.rows.length; i++) {
						this.myHotelList.push(hotelList[i]);
					}

					this.params.pageNum = pageNum;
					this.params.pageSize = pageSize;

					let last_page = Math.ceil(response.total / pageSize)
					if (pageNum < last_page) {
						this.loadStatus = 'more';
					} else {
						this.loadStatus = 'noMore';
					}
				})
			},
			
			getSearchHotelList() {
				getSearchHotelList(this.searchParams).then(response => {
					this.searchHotelList = response.rows;
				})
			},

			handleToRoom(hotelId) {
				this.$tab.navigateTo(`/pages/hotel/room/index?hotelId=${hotelId}`)
			},
			changeTab(e) {
				if (this.current === e.index) return;
				this.current = e.index
				
				if(e.index===0){
					this.myHotelList = [];
					this.params = {
						pageNum: 1,
						pageSize: 10
					}
					this.getMyHotelManageList();
				}
			},
			onDelete(item) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要移除' + item.name + '吗?',
					success: function(res) {
						if (res.confirm) {
							deleteMyHotel(item.id).then(response => {
								that.myHotelList = [];
								that.getMyHotelManageList();
							})
						}
					},
				});
			},
			addHotel(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要添加' + item.name + '吗?',
					success: function(res) {
						if (res.confirm) {
							const param = item.cityName+'$'+item.hotelId+'$'+item.name+'$'+item.hotelGroup
							addHotel({params:param}).then(response => {
								if(response.code===200){
									const params = {
										message:'添加'+item.name+"成功!",
										type:"success"
									}
									that.$refs.uToast.show(params)
								}
							})
						}
					},
				});
				//params: 深圳$WYN5180022$维也纳酒店（深圳东门湖贝地铁站店）$jj,深圳$10223$麗枫酒店·深圳罗湖东门晒布地铁站店$jj
			},
			showHotelGroup() {
				this.show = !this.show
			},
			hideHotelGroup() {
				this.show = !this.show
			},
			confirmHotelGroup(e) {
				this.searchParams.hotelGroup = e.value[0].value
				this.show = !this.show
			},
			cityNameInputDialogToggle() {
				this.$refs.cityNameInputDialog.open()
			},
			cityNameDialogInputConfirm(val) {
				this.searchParams.cityName = val
				this.$refs.cityNameInputDialog.close()
			},
			hotelNameInputDialogToggle() {
				this.$refs.hotelNameInputDialog.open()
			},
			hotelNameDialogInputConfirm(val) {
				this.searchParams.keyword = val
				this.$refs.hotelNameInputDialog.close()
			},
			handleSearch(){
				if(!this.searchParams.hotelGroup){
					const params = {
						message:'请选择所属集团',
						type:"error"
					}
					this.$refs.uToast.show(params)
					return false;
				}
				
				if(!this.searchParams.keyword){
					const params = {
						message:'请输入酒店名称',
						type:"error"
					}
					this.$refs.uToast.show(params)
					return false;
				}
				
				this.getSearchHotelList()
			},
			onPullDownRefresh() {
				this.myHotelList = [];
				this.params = {
					pageNum: 1,
					pageSize: 10
				}
				if(this.current===0){
					this.getMyHotelManageList();
				}
				
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 1000);
			},
			onReachBottom() {
				this.loadmore();
			},
			// 加载更多
			loadmore() {
					if (this.loadStatus !== 'noMore') {
						this.getMyHotelManageList(this.params.pageNum + 1);
					}

			}
		},
		onLoad() {
			 this.getMyHotelManageList();
		},
	}
</script>

<style lang="scss">
		.slot-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
		}
		.slot-text {
			flex: 1;
			font-size: 14px;
			color: #3b4144;
			margin-right: 10px;
		}
		.slot-text2 {
			flex: 1;
			font-size: 14px;
			color: #999;
			margin-right: 10px;
		}
		
	.container {
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-around;
		//这个是为了让代码块均匀分布
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
		//这个是为了让元素恢复原位
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
		//经过查看源码得知，下划线之所以错位，是因为每一个子盒子加起来并没有撑满整个盒子，所以当下划线取定位的时候，就会发生错位，因为两个子盒子宽度无法沾满整个盒子，所以就需要flex：1来沾满盒子。
	}
</style>